<template>
  <div id="J_prismPlayer"></div>
</template>

<script setup lang="ts">
import {onMounted} from "vue";

onMounted(()=>{
  fetchPlayer()
})

function fetchPlayer()  {
  const player = new Aliplayer({
    id: "J_prismPlayer", // 容器id
    source:"https://player.alicdn.com/resource/player/big_buck_bunny.mp4",
    isLive: true,// 设置为true时为直播状态
    width: "100%",
    height: "100%",
    diagnosisButtonVisible: false,// 是否显示检测按钮
    // vodRetry: 1,// 点播失败重试次数，默认3次
    // liveRetry: 1,// 直播播放失败重试次数，默认5次
    skinLayout: [
      { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
      { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
      { name: "infoDisplay", align: "cc" },
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          { name: "liveDisplay", align: "tlabs", x: 15, y: 6 },
          { name: "fullScreenButton", align: "tr", x: 10, y: 10 },
          { name: "volume", align: "tr", x: 5, y: 10 },
        ],
      },
    ],
  });
}

</script>

<style scoped>

</style>
